vue 结合scss实现前台主题颜色动态变化

2023-10-16 13:17| 来源: 网络整理| 查看: 265

1、安装scss，参考文章：

vue项目中设置全局引入scss，使每个组件都可以使用变量 - 简书在Vue项目中使用scss,如果写了一套完整的有变量的scss文件。那么就需要全局引入，这样在每个组件中使用。可以在mian.js全局引入，下面是使用方法。 1：安装no...https://www.jianshu.com/p/2129f7d704292、在 assets/styles下新建.scss文件，定义想要变化的颜色和主题。（只列举部分颜色）

// -------------------------------更换的系统主题颜色2（Standard）-----------------------------------// // 菜单所有未选中文字样式 $menuTextStandard: #333333; // 一级菜单样式 $menuBgStandard: #ffffff; // 一级菜单鼠标悬浮 $menuHoverStandard: #f7f7f7; // 一级菜单选中时文字样式 $subMenuActiveTextStandard: #82ba00; // 选中背景： $subMenuActiveBgStandard: #e6f1cc; // -------------------------------更换的系统主题颜色3（StandardRed）-----------------------------------// // 菜单所有未选中文字样式 $menuTextStandardRed: #333333; // 一级菜单样式 $menuBgStandardRed: #ffffff; // 一级菜单鼠标悬浮 $menuHoverStandardRed: #f7f7f7; // 一级菜单选中时文字样式 $subMenuActiveTextStandardRed: #911844; // 选中背景： $subMenuActiveBgStandardRed: #e9d1da; // -------------------------------更换的系统主题颜色4（StandardSkyBlue）-----------------------------------// // 菜单所有未选中文字样式 $menuTextStandardSkyBlue: #333333; // 一级菜单样式 $menuBgStandardSkyBlue: #ffffff; // 一级菜单鼠标悬浮 $menuHoverStandardSkyBlue: #f7f7f7; // 一级菜单选中时文字样式 $subMenuActiveTextStandardSkyBlue: #008299; // 选中背景： $subMenuActiveBgStandardSkyBlue: #cce6eb;

3、为需要切换的5个颜色在下面定义方法动态切换颜色：（注意部分样式要加 import 才会生效）

@mixin menuText($color) { color: $color; // /*判断匹配*/ [data-theme="standard"] & { color: $menuTextStandard; } [data-theme="standardRed"] & { color: $menuTextStandardRed; } [data-theme="standardSkyBlue"] & { color: $menuTextStandardSkyBlue; } } @mixin menuBg($color) { background-color: $color !important; // /*判断匹配*/ [data-theme="standard"] & { background-color: $menuBgStandard !important; } [data-theme="standardRed"] & { background-color: $menuBgStandardRed !important; } [data-theme="standardSkyBlue"] & { background-color: $menuBgStandardSkyBlue !important; } } @mixin menuHover($color) { background-color: $color; // /*判断匹配*/ [data-theme="standard"] & { background-color: $menuHoverStandard; } [data-theme="standardRed"] & { background-color: $menuHoverStandardRed; } [data-theme="standardSkyBlue"] & { background-color: $menuHoverStandardSkyBlue; } } @mixin subMenuActiveText($color) { color: $color !important; // /*判断匹配*/ [data-theme="standard"] & { color: $subMenuActiveTextStandard !important; } [data-theme="standardRed"] & { color: $subMenuActiveTextStandardRed !important; } [data-theme="standardSkyBlue"] & { color: $subMenuActiveTextStandardSkyBlue !important; } } @mixin subMenuActiveBg($color) { background-color: $color !important; // /*判断匹配*/ [data-theme="standard"] & { background-color: $subMenuActiveBgStandard !important; } [data-theme="standardRed"] & { background-color: $subMenuActiveBgStandardRed !important; } [data-theme="standardSkyBlue"] & { background-color: $subMenuActiveBgStandardSkyBlue !important; } }

4、在main.js 中引入文件：

import './assets/styles/variables.scss'

5、在所有页面需要变色的颜色上使用：

// color:#f7f7f7 改为： @include menuText();

6、App.vue 中一键全局更改主题颜色：

function setAttribute(theme) { window.document.documentElement.setAttribute("data-theme", theme); } setAttribute("standard"); // 应用主题2 setAttribute("standardRed"); // 应用主题3 本文参考链接：

vue+scss动态改变主题颜色 - 就这样吧丶 - 博客园1、新建.scss后缀公用文件，放在assets或者其他地方都可以 /*需要切换的颜色变量*/ $color-primary1:#1776E1; /* 更换的颜色 */ $color-primary2https://www.cnblogs.com/wtwebskill/p/11812687.html

【本文地址】

公司简介

联系我们